@use '@scss/common' as *;

$curve: cubic-bezier(0.165, 0.84, 0.44, 1);

.wrapper {
  position: relative;
}

.container {
  display: inline-block;
  position: relative;
  background: radial-gradient(circle at center, #dfedf4 0%, #628699 20%, #628699 100%);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 200vw 200vh;
  overflow: hidden;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: opacity 2350ms $curve;
  margin-bottom: 0;
  line-height: 1.1;

  @include data-theme-selector('dark') {
    background: radial-gradient(circle at center, #dfedf4 0%, #628699 20%, #628699 100%);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 200vw 200vh;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  @include data-theme-selector('light') {
    background: radial-gradient(circle at center, #004a6e 0%, #628699 20%, #628699 100%);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 200vw 200vh;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &::selection {
    color: black;
    -webkit-text-fill-color: currentcolor;
  }

  & em,
  strong,
  a {
    color: var(--theme-text);
    background-clip: border-box;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
    background: none;
    display: inline;
    font-style: normal;

    @include data-theme-selector('dark') {
      color: white;
    }
    @include data-theme-selector('light') {
      color: black;
    }
  }
}
